Content elements (e.g., text, images, buttons, panels, lists, forms, etc) of a web page are often visually styled through the application of web browser style sheet rules to the elements. Style sheet rules are typically specified by a developer of the web page in a web browser style sheet associated with the web page. The web browser, when rendering the web page, may parse the style sheet to determine the style sheet rules that are to be applied to the elements of the web page. Once the rules have been determined, the web browser may apply the style sheet rules to the elements so that the elements appear on the web page visually styled in accordance with the rules.
For example, a particular style sheet rule may specify the color of a particular web page element. The web browser, when rendering the web page, may apply the particular style sheet rule by coloring the particular element with the specified color. Web browser style sheets are often used by developers to separate the task of specifying the content of the web page from the task of defining the presentation of that content thereby making it easier for the developer to develop, maintain, and modify the web page.
Web page developers often create and maintain web browser style sheets “by hand” using a computer-based text editing application. Typically, this involves generating and modifying text statements according to a style sheet language. One widely used style sheet language is known as Cascading Style Sheets (CCS), the specification of which is developed and maintained by an industry community known as the World Wide Web Consortium (W3C).
A typical web browser style sheet contains a number of different style sheet rules. A style sheet rule may contain a selector and one or more style sheet declarations associated with that selector. The selector of a rule determines which elements of a web page the associated style sheet declarations apply to. A style sheet declaration may specify a style sheet property and a value of that property. For example, to set the text color of ‘H1’ elements to blue, the following style sheet rule may be used:
H1 {color: blue}.
In the above example, (‘H1’) is the selector and (‘color: blue’) is a style sheet declaration. The declaration has two parts: a style sheet property (‘color’) and a value (‘blue’). As a typical style sheet may contain hundreds or even thousands of style sheet rules, managing style sheets by hand is often a cumbersome and error-prone task for developers.
More recently, in an effort to make the creation and maintenance of web browser style sheets more manageable, style sheet meta-languages have been developed. Typically, these meta-languages are scripting languages that extend a style sheet language with useful programming language mechanisms such as variables, nesting, mix-ins, and inheritance. A style sheet meta-language compiler may be used to compile a meta-language style sheet to a web browser style sheet. Some examples of currently available style sheet meta-language compilers are: the Syntactically Awesome Style Sheets (SASS) compiler currently available on the Internet from the sass-lang.com domain and the LESS compiler currently available on the Internet from the lesscss.org domain.
For example, a developer may author the following meta-language style sheet that, among other things, declares and references the meta-language style sheet variables (‘$blue’) and (‘$margin’), invokes the meta-language style sheet function (‘darken’), and specifies basic math operations:
01: $blue: #3bbfce
02: $margin: 16px
03:
04: .content-navigation
05: border-color: $blue
06: color: darken($blue, 9%)
07:
08: .border
09: padding: $margin/2
10: margin: $margin/2
11: border-color: $blue
The above meta-language style sheet, when compiled, may produce the following web browser style sheet:
01: .content-navigation {
02: border-color: #3bbfce;
03: color: #2b9eab;
04: }
05:
06: .border {
07: padding: 8px;
08: margin: 8px;
09: border-color: #3bbfce;
10: }
In particular, a meta-language compiler, among other operations, when compiling the above-example meta-language style sheet to produce the web browser style sheet, substituted the declared values of the (‘$blue’) and (‘$margin’) variables for the references to those variables, invoked the (‘darken’) function to darken the declared red-green-blue (RGB) value (‘#3bbfce’) of the (‘$blue’) variable by 9 percent to produce the darkened RGB value (‘#2b9eab’), and divided the declared value (‘16px’) of the (‘$margin’) variable by 2 to produce a final value (‘8px’).
Use of meta-language style sheets can make web page development easier for developers. For example, if the developer of the above meta-language style sheet desired a padding and margin of (‘6px’) instead of (‘8px’), the developer may apply a single edit to the meta-language style sheet that specifies a value of (‘12px’) for the (‘$margin’) variable and then compile the meta-language style sheet to produce the desired web browser style sheet. This could be done instead of editing the web browser style sheet directly which, in this example, would require the developer to apply two edits, one each for the values of the (‘padding’) and (‘margin’) style sheet property declarations. Similarly, if the developer desired a lighter shade of blue for the values of the two (‘border-color’) style sheet properties, the developer could apply a single edit to the value of the (‘$blue’) variable in the meta-language style sheet instead of applying two edits to the web browser style sheet. Further, the developer would not be required to perform math to calculate the 9 percent darkened RGB value for the (‘color’) style sheet property based on the new RGB value for the (‘$blue’) variable. Instead, that math would be automatically performed by the (‘darken’) function when the edited meta-language style sheet is compiled by the meta-language compiler to a web browser style sheet. Thus, meta-language style sheets and compilers make some web browser style sheet creation and maintenance tasks easier for developers.
While meta-language style sheets can improve the web page development process, the development cycle time between making an edit to a meta-language style sheet and viewing the results of the edit as applied and displayed in a web page can be lengthy and repetitive. For example, assume a developer of a web page that applies the above web browser style sheet desires to see how the web page will appear in a web browser if the blue color is darkened by 15% instead of 9%. To do so under current web page development approaches, the developer may need to: (1) edit a meta-language style sheet file, (2) compile the meta-language style sheet to produce a new web browser style sheet, and (3) reload the web page in the web browser so that the new web browser style sheet is applied to the web page. This development cycle may be tedious and time consuming for the developer, especially if the developer desires to see how the web page will appear for multiple different percentages. For example, under current approaches, if the developer desires to see how the web page will appear at 12%, 13%, 14%, 15%, and so on up to 20%, the developer would need to perform the edit, compile, and reload steps for each different percentage.
Based on the foregoing, it is clearly desirable to help web page developers reduce the development cycle time between changing the value of a meta-language style sheet variable and viewing the results of the change as applied to the web page.
The approaches described in this section are approaches that could be pursued, but not necessarily approaches that have been previously conceived or pursued. Therefore, unless otherwise indicated, it should not be assumed that any of the approaches described in this section qualify as prior art merely by virtue of their inclusion in this section.